<template>
	<div class="nav_child">
		<div class="course_contant">
			<ul>
				<template v-if="!$util.isEmpty(list)">
					<li v-for="(item,index) in list" :key="index" @click="skiptoAdddymac('edit',item)">
						<div class="dynamic_img">
							<img alt :src="item.images" />
						</div>
						<p>{{ item.title }}</p>
						<a class="rigt_more">
							<img :src="`${constant.imgUrl}center/icon_right_arrow_large.png`" alt="箭头" />
						</a>
						<a class="delete_expe" @click.stop="remove(item.id,index)">
							<img :src="`${constant.imgUrl}center/icon_deleuser.png`" alt="删除" />
						</a>
					</li>
				</template>
			</ul>
		</div>
		<footer class="app-footer" @click="skiptoAdddymac('add')">
			<i class="iconfont iconicon-test" />添加
		</footer>
	</div>
</template>

<script>
import $apiCompany from '@/api/company'

export default {
	name: 'Dynamic',
	inject: ['queryData'],
	data() {
		return {
			checked: true,
			list: [],
			constant: this.$constant
		}
	},
	onShow() {
		console.log(123)
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			$apiCompany
				.getNews({
					company_id: this.queryData().owner_user_id
				})
				.then(res => {
					if (res.status == 'success') {
						this.list = res.data
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		delete(id, index) {
			$apiCompany
				.deleteNews({
					id
				})
				.then(res => {
					if (res.status == 'success') {
						this.list.splice(index, 1)
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		remove(id, index) {
			// 删除
			let that = this
			uni.showModal({
				title: '提示',
				content: '你确定要删除吗?',
				success: res => {
					if (res.confirm) {
						that.delete(id, index)
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})
		},
		skiptoAdddymac(status, item) {
			let query = {
				types: 6,
				status,
				editData: this.$util.isEmpty(item) ? null : JSON.stringify(item)
			}
			uni.navigateTo({
				url: `/pages/company/addDynamic${this.commonJS.queryData(query)}`
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.nav_child {
		margin-top: 0;
		background: none;
	}
	.course_contant ul {
		width: 90%;
		margin-left: 5%;
		height: auto;
	}
	.course_contant ul li {
		width: 100%;
		height: 200px;
		margin-top: 30px;
		border-radius: 20px;
		background: white;
		position: relative;
	}
	.dynamic_img {
		width: 140px;
		height: 140px;
		float: left;
		margin: 30px;
	}
	.dynamic_img img {
		width: 100%;
		height: 100%;
		float: left;
	}
	.course_contant ul li p {
		font-size: 34px;
		margin-top: 58px;
		line-height: 50px;
		float: left;
		width: 370px;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
	}
	.course_contant ul li .rigt_more {
		width: 15px;
		height: 28px;
		float: right;
		margin-top: 13%;
		margin-right: 5%;
	}
	.course_contant ul li .rigt_more img {
		width: 100%;
		height: 100%;
		float: left;
	}
	.delete_expe {
        width: 60px;
        height: 60px;
        position: absolute;
        right: -20px;
    	top: -20px;
    	// float: right;
		@include direction(center, center);
	}

	.delete_expe img {
        width: 30px;
        height: 30px;
		// float: left;
	}
	.iconfont {
		font-size: 28px;
	}
</style>
